<template>
<div>
		<div class="zd_item_d" v-for="i,k in list" :key="k" @click="toDetail(i)">
		<template v-if="type_id==2">
			<div class="zd_chain_name" v-if="i.chain_names">
				{{i?.chain_names?.split(',')[i?.chain_names?.split(',').length-1]}}
			</div>
			<div class="zd_name">
				<div class="zd_type1" v-if="i.need_money">[{{i.need_money*1}}亿]</div>
				{{i.name}}
				<div class="price" v-if="i.entrust_money&&i.is_service">
					{{i.entrust_money*1}}亿
				</div>
			</div>
			<div class="flex_ac color1" v-if="i.desc">
				<div class="zs_ttt line_text2">{{i.desc}}</div>
			</div>
			<div class="flex_sb flex_sc" v-if="type_id==2">
				<div class="flex_ac color1" v-if="i.need_money">
					<div class="zs_ttt">投资总额</div>：
					<span>{{i.need_money*1}}亿</span>
				</div>
				<div class="flex_ac color1">
					<div class="zs_ttt">意向地区</div>：
					<span>{{i?.intention_city_names?.split(',').join('')||'不限'}}</span>
				</div>
			</div>		
			<div class="flex_sb flex_sc" v-if="type_id==3">
				<div class="flex_ac color1">
					<div class="zs_ttt">投资总额</div>：
					<span>{{i.invest_money||'-'}}</span>
				</div>
				<div class="flex_ac color1">
					<div class="zs_ttt">意向地区</div>：
					<span>{{i.city_names||'不限'}}</span>
				</div>
			</div>
			<div class="line"></div>
			<div class="flex_ac" v-if="type_id!=1">
				<template v-if="type_id==2">
					<img class="avatar" v-if="i.avatar" :src="i.avatar" mode="aspectFill"></img>
					<img class="avatar" v-else src="~@/assets/img/my/avatar.png" mode=""></img>
				</template>
				<div  v-if="type_id==2" class="avatar_name">{{ '***' }}</div>
				<div v-if="type_id==3" class="avatar_name1">
					{{i.from}}
				</div>
				
				<div class="flex_ac xx_xx" v-if="type_id==2">
					<img src="~@/assets/img/browse.png" mode=""></img>
					<div class="">{{i.read_num*1}}</div>
				</div>
				<div class="flex_ac xx_xx" v-if="type_id==2">
					<img src="https://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/qiji/rc_icon.png" mode=""></img>
					<div class="">{{i.buy_num*1||0}}</div>
				</div>
				<div class="time">	
					{{i.create_time.split(' ')[0]}}
				</div>
			</div>
		</template>
		<template v-if="type_id==1">
			<div class="zd_name line_text2">
				<div class="zd_type"  v-if="i.type_names">{{i.type_names}}</div>
				{{i.title}}</div>
			<div class="flex mt14" v-if="i.chain_names">
				<div class="com_item1" v-for="chain,k1 in i.chain_names.split(',').slice(0,2)" :key="k1">
					{{chain}}
				</div>
			</div>
			<div class="flex_sb color1">
				<div class="zs_ttt">{{i.from||'-'}}</div>
				<div class="time">{{i.createtime}}</div>
			</div>
			<div class="line" style="margin-bottom: 5px !important;" v-if="i.company_names"></div>
			<div class="flex_w"  v-if="i.company_names">
				<div class="com_item" v-for="com,k1 in i.company_names.split(',').slice(0,4)" :key="k1">
					{{com}}
				</div>
			</div>
		</template>
		<template v-if="type_id==3">
			<div class="zd_name line_text2">{{i.title}}</div>
			<div class="flex mt14" v-if="i.chain_names">
				<div class="com_item1" v-for="chain,k1 in i.chain_names.split(',').slice(0,2)" :key="k1">
					{{chain}}
				</div>
			</div>
			<div class="flex_sb">
				<div class="flex_ac color1">
					<div class="zs_ttt">投资总额</div>：
					<span v-if="i.invest_money">{{i.invest_money||'-'}}亿</span>
					<span v-else>面议</span>
				</div>
				<div class="flex_ac color1">
					<div class="zs_ttt">落地地区</div>：
					<span>{{i.city_names.split(',')[0]||'不限'}}</span>
				</div>
			</div>
			<div class="line"></div>
			<div class="flex_sb flex_ac">
				<div class="" style="font-size: 11px;color: #000000;">来源：{{i.from}}</div>
				<div class="flex_ac" style="font-size: 11px;">
					{{i.createtime}}
				</div>
			</div>
		</template>
		<template v-if="type_id==4">
			<div class="zd_name line_text2">
				<div class="zd_type1"  v-if="i.invest_money">[{{i.invest_money}}]</div>
			{{i.title}}</div>
			<div class="flex mt14" v-if="i.chain_names">
				<div class="com_item1" v-for="chain,k1 in i.chain_names.split(',').slice(0,2)" :key="k1">
					{{chain}}
				</div>
			</div>
			<div class="flex_sb flex_ac mt10">
				<div class="flex_ac" style="font-size: 15px;color: #000000;">
					数据采集来源：<span class="" style="color: #138AF2;">{{i.from}}</span>
				</div>
				<a :href="'tel:'+i.from_tel">
					<img class="ml20" style="width:20px;height:20px" src="https://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/qiji/xs_phone.png" mode=""></img>
				</a>
			</div>
			<div class="flex_sb flex_ac mt10">
				<div class="time">{{i.createtime}}</div>
			</div>
		</template>
	</div>
</div>
</template>

<script>
export default {
	props:{
		type_id:{
			default:2,
		},
		list:{
			default:[],
		}
	},
  data() {
    return {
    }
  },
  methods: {
		desensitizeName(name) {
		  return name.slice(0, 1) + '*'.repeat(name.length - 1);
		},
		toDetail(i) {
			//网络1  投资2 
			let url = this.type_id==1?'newsDetail_xs':this.type_id==2?'newsXsDetail':this.type_id==4?'newsDetail':'newsDetail'
			this.$router.push({name:url,query:{id:i.id}})
		},
  }
}
</script>

<style scoped lang="scss">
.zd_type{
	display: inline-block;
	height: 18px;
	line-height: 18px;
	padding:0 8px;
	background: rgba(19,138,242,0.1);
	border-radius: 3px;
	
	font-size: 12px;
	color: #138AF2;
	margin-right:10px;
	position: relative;
	top: 2px;
}
.zd_type1{
	display: inline-block;
	height: 18px;
	line-height: 18px;
	font-size: 16px;
	color: #138AF2;
	margin-right:10px;
	position: relative;
	top: -2px;
}
.zd_item_d{
	padding: 20px 10px 15px;
	background: #FFFFFF;
	border-radius: 3px;
	margin: 10px 5px;
	position: relative;
  box-shadow: 0px 2px 8px 2px rgba(250,135,30,0.13);

	.zd_name{
		font-size: 18px;
		color: #000000;
		margin-right:7px;
		margin-bottom: 5px;
	}
	.price{
		display: inline-block;
		padding: 0 6px;
		height: 16px;
		line-height: 16px;
		background: linear-gradient(140deg, #FF3334, #FE7527);
		border-radius: 0px 3px 0px 3px;
		font-size: 12px;
		color:#fff;
		margin-left: 5px;
		min-width: 35px;
		text-align: center;
		position: relative;
		top:-2px;
	}
	.zd_chain_name{
		position: absolute;
		right:0;
		top:0;
		width:fit-content;
		height: 15px;
		background: linear-gradient(-62deg, #54A3FF, #138AF2);
		border-radius: 0 3px 0px 3px;
		padding:0 5px;
		line-height: 15px;
		font-size: 10px;
		color: #FFFFFF;
	}
	.color1{
		color: #666666;
		font-size: 13px;
		margin-top:10px;
		text{
			display: block;
		 color:#138AF2;
		 overflow: hidden;
		 text-overflow: ellipsis;
		 white-space: nowrap;
		}
	}
	.line{
		position: relative;
		width: calc(100% + 20px);
		left:-10px;
		margin-top: 15px;
		margin-bottom: 15px;
		height:1px;
		background: #E6E6E6;
	}
	.avatar{
		width:20px;
		height:20px;
		border-radius: 10px;
		margin-right:10px;
		background: #138AF2;
	}
	.avatar_name{
		margin-right:auto;
		font-size: 13px;
		color: #000000;
	}
	.avatar_name1{
		margin-right:auto;
		font-size: 13px;
		color: #000000;
	}
	.xx_xx{
		font-weight: 400;
		font-size: 13px;
		color: #999999;
		margin-right: 10px;
		width:50px;
		img{
			width:12px;
			height:12px;
			margin-right: 2px;
		}
	}
	.time{
		font-weight: 400;
		font-size: 13px;
		color: #999999;
	}
}

.com_item{
	height: 18px;
	line-height: 18px;
	padding:0 8px;
	background: rgba(19,138,242,0.1);
	border-radius: 3px;
	
	font-size: 12px;
	color: #138AF2;
	margin-right:10px;
	margin-top: 10px;
}
.com_item1{
	height: 18px;
	line-height: 18px;
	padding:0 8px;
	background: rgba(235,116,24,0.1);
	border-radius: 3px;
	
	font-size: 12px;
	color: #EB7418;
	margin-right:10px;
	margin-bottom: 5px;
}
</style>